<script>
export default {
  data(){
    return{
      list: [1, 3 ,6, 4, 5],
    } 
  },
  methods:{
    changeList: function(){
      // Vue2通过索引值去修改数组，这样是不能达到响应式的。
      // Vue3是通过proxy修改数组，这样是可以达到响应式的，动态修改视图。
      // Vue3通过索引值去修改数组，可以达到响应式，动态修改视图。因为是proxy。
      // this.list[5] = 7;
      // this.list.push(8,9);  // 数组末尾添加元素
      // this.list.pop();      // 数组末尾删除元素
      // shift()            // 删除第一位元素
      // unshift()          // 给数组首位添加元素

      // splice()           // 插入删除替换
      // 删除元素
      // 第一个参数：表示开始插入或者开始删除的元素下标
      // 第二个参数：表示要要删除几个元素（如果没有传，删除后面所有的元素）
      // this.list.splice(1,2); // 删除3, 6，（0开始）从1下标，开始删除两位。
      // this.list.splice(1); // （0开始）从1下标，开始删除后面所有。
      
      // 插入元素
      // 第一个参数：表示开始插入或者开始删除的元素下标
      // 第二个参数：0，可以理解为也就是不删除元素。
      // this.list.splice(1,0,7,8,9);// （0开始）从1下标，开始删除两位。0表示插入,插入789三个元素。


      // 替换元素
      // 第一个参数：表示开始插入或者开始删除或者开始替换的元素下标
      // 第二个参数：需要替换几个元素
      // 替换和删除的区别。删除只有两个参数，替换大于等于三个参数.
      // this.list.splice(1,3,7,8,9);// （0开始）从1下标，开始替换三位。替换789三个元素。

      this.list.sort();
      // sort()
      // reverse()
      this.list.reverse();


    }
  },
}
  
</script>

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item">{{item}}</li>
    </ul>
    <button @click="changeList">改变数组</button>
  </div>
</template>

<style> 

</style>
